<template>
  <div class="bg">
    <!-- <div style='height: 1px; width: 100%;background-color:#EAF5FF;'></div> -->
    <van-sticky>
      <form action="/">
        <van-search
          @input="onSearch"
          v-model="query.name"
          @search="onSearch"
          clearable
          @clear="onClear"
          placeholder="请输入客户/员工名称"
        />
      </form>
      <div class="menu">
        <span @click="openDialg('type')">
          {{ menuTypeName }}
          <img class="select" width="16" height="16" src="../../assets/select@2x.png" />
        </span>
        <span @click="openDialg('state')">
          {{ menuStateName }}
          <img class="select" width="16" height="16" src="../../assets/select@2x.png" />
        </span>
        <span @click="openDialg('tag')">
          企业标签
          <img class="select" width="16" height="16" src="../../assets/select@2x.png" />
        </span>
        <span @click="openDialg('date')">
          添加时间
          <img class="select" width="16" height="16" src="../../assets/select@2x.png" />
        </span>
      </div>
      <van-overlay :lock-scroll="false" :show="show" z-index="2">
        <form action="/">
          <van-search
            @input="onSearch"
            v-model="query.name"
            @search="onSearch"
            clearable
            @clear="onClear"
            shape="round"
            placeholder="请输入客户/员工名称"
          />
        </form>
        <div class="menu">
          <span @click="openDialg('type')" :style="showType ? titleActive : ''">
            {{ menuTypeName }}
            <img v-if="showType" class="select" width="16" height="16" src="../../assets/selected@2x.png" />
            <img v-else class="select" width="16" height="16" src="../../assets/select@2x.png" />
          </span>
          <span @click="openDialg('state')" :style="showState ? titleActive : ''">
            {{ menuStateName }}
            <img v-if="showState" class="select" width="16" height="16" src="../../assets/selected@2x.png" />
            <img v-else class="select" width="16" height="16" src="../../assets/select@2x.png" />
          </span>
          <span @click="openDialg('tag')" :style="showTag ? titleActive : ''">
            企业标签
            <img v-if="showTag" class="select" width="16" height="16" src="../../assets/selected@2x.png" />
            <img v-else class="select" width="16" height="16" src="../../assets/select@2x.png" />
          </span>
          <span @click="openDialg('date')" :style="showDate ? titleActive : ''">
            添加时间
            <img v-if="showDate" class="select" width="16" height="16" src="../../assets/selected@2x.png" />
            <img v-else class="select" width="16" height="16" src="../../assets/select@2x.png" />
          </span>
        </div>
        <template v-if="showType">
          <div class="type_list">
            <div
              class="item"
              :style="item.type === queryTemp.customerType ? activeStyle : ''"
              v-for="(item, index) in typeActions"
              :key="index"
              @click="onSelectType(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="submit">
            <div class="submit_button" @click="submitType">确定</div>
          </div>
        </template>
        <template v-if="showState">
          <div class="type_list">
            <div
              class="item"
              :style="item.stageVal == queryTemp.trackState ? activeStyle : ''"
              v-for="(item, index) in stageList"
              :key="index"
              @click="onSelectState(item)"
            >
              {{ item.stageKey }}
            </div>
          </div>
          <div class="submit">
            <div class="submit_button" @click="submitState">确定</div>
          </div>
        </template>
        <template v-if="showTag">
          <div style="background:#fff;">
            <select-tag type="1" :selected="selectTagList" @submit="getSelectList"></select-tag>
          </div>
        </template>
        <template v-if="showDate">
          <div style="background:#fff;">
            <select-date :start="query.beginTime" :end="query.endTime" @success="getDate"></select-date>
          </div>
        </template>
      </van-overlay>
    </van-sticky>
    <div class="sub-search">
      <span v-if="isSelectCustomer">选择客户</span>
      <span v-else>客户总数： {{ total }}</span>
      <my-switch v-model="checked" text="个人|全部" @change="changeFn"></my-switch>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="暂无更多数据" @load="onLoad">
      <div class="list">
        <div
          class="unit"
          :class="activeCustomerId == data.id && 'active'"
          v-for="(data, index) in dataList"
          :key="index"
          @click="gotoDetail(data)"
        >
          <img class="unit_img" :src="data.avatar" />
          <div class="unit_content">
            <div style="display: flex;align-items:start;">
              <span class="name" v-html="data.customerName"></span>
              <div style="flex-shrink:0;display:inline-block;">
                <ShowRes :resource="data.customerType" :sex="data.gender" />
              </div>
            </div>
            <div class="user">
              <span>跟进员工：</span>
              <span v-html="data.userName"></span>
            </div>
          </div>
          <div class="unit_state">
            <div>
              <span
                class="state"
                :class="{
                  state2: data.trackState === 3,
                  state3: data.trackState === 5,
                  state1: data.trackState !== 3 && data.trackState !== 5,
                }"
              >
                {{ trackStateFn(data.trackState) }}
              </span>
            </div>
            <span class="date">{{ data.firstAddTime }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import SelectTag from '@/components/SelectTag'
import SelectDate from '@/components/SelectDate'
import ShowRes from '@/components/ShowRes'
import MySwitch from '@/components/Switch'
import { getDataList } from '@/api/group'
import { getStageList } from '@/api/common'
export default {
  name: 'customer_list',
  props: {
    // 是否为选择客户组件
    isSelectCustomer: {
      type: Boolean,
      default: false,
    },
  },
  components: { SelectTag, ShowRes, MySwitch, SelectDate },
  data() {
    return {
      loading: false,
      finished: false,
      menuTypeName: '客户类型',
      menuStateName: '商机阶段',
      currentDate: '',
      queryTemp: {
        customerType: null,
        trackState: null,
      },
      query: {
        name: '',
        tagIds: '',
        customerType: null,
        trackState: null,
        beginTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 10,
        delFlag: 0,
        dataScope: false,
      },
      checked: true,
      show: false,
      showType: false,
      showState: false,
      showTag: false,
      showDate: false,
      typeActions: [
        { name: '全部', type: null },
        { name: '微信客户', type: 1 },
        { name: '企业客户', type: 2 },
      ],
      stateActions: [
        { name: '全部', color: '', type: null },
        { name: '待跟进', color: '', type: 1 },
        { name: '跟进中', color: 'warning', type: 2 },
        { name: '已成交', color: 'success', type: 3 },
        { name: '无意向', color: 'info', type: 4 },
        { name: '已流失', color: 'danger', type: 5 },
      ],
      activeStyle: {
        background: '#ECF5FF',
        color: '#0079DE',
      },
      titleActive: {
        color: '#0079de',
      },
      selectTagList: [],
      dataList: [],
      total: 0,
      stageList: [],

      activeCustomerId: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList(), this.getStage()
  },
  mounted() {},
  methods: {
    getStage() {
      getStageList().then((res) => {
        this.stageList = res.data
        this.stageList.unshift({ stageKey: '全部', stageVal: null })
      })
    },
    gotoDetail(row) {
      this.activeCustomerId = row.id
      if (this.isSelectCustomer) {
        this.$emit('change', row)
      } else {
        this.$router.push({
          name: 'portrait',
          query: {
            id: row.externalUserid,
            userId: row.firstUserId,
          },
        })
      }
    },
    getDate(start, end) {
      this.query.beginTime = start
      this.query.endTime = end
      this.showDate = false
      this.show = false
      this.getList(1)
    },
    onLoad() {
      if (this.total !== this.dataList.length) {
        this.query.pageNum++
        this.getList()
      }
    },
    getSelectList(data) {
      this.selectTagList = data
      this.query.tagIds = data
        .map((dd) => {
          return dd.tagId
        })
        .join(',')
      this.showTag = false
      this.show = false
      this.getList(1)
    },
    setName() {
      this.typeActions.forEach((dd) => {
        if (dd.type === this.query.customerType) {
          this.menuTypeName = dd.name === '全部' ? '客户类型' : dd.name
        }
      })
    },
    setStateName() {
      this.stageList.forEach((dd) => {
        if (dd.stageVal === this.query.trackState) {
          this.menuStateName = dd.stageKey === '全部' ? '商机阶段' : dd.stageKey
        }
      })
    },
    trackStateFn(state) {
      let str = ''
      this.stateActions.forEach((dd) => {
        if (dd.type === state) {
          str = dd.name
        }
      })
      return str
    },
    openDialg(type) {
      if (type === 'type') {
        if (this.showType) {
          this.show = false
        } else {
          this.queryTemp.customerType = JSON.parse(JSON.stringify(this.query.customerType))
          this.show = true
        }
        this.showType = !this.showType
        this.showState = false
        this.showTag = false
        this.showDate = false
      }
      if (type === 'state') {
        if (this.showState) {
          this.show = false
        } else {
          this.queryTemp.trackState = JSON.parse(JSON.stringify(this.query.trackState))
          this.show = true
        }
        this.showState = !this.showState
        this.showType = false
        this.showTag = false
        this.showDate = false
      }
      if (type === 'tag') {
        if (this.showTag) {
          this.show = false
        } else {
          this.show = true
        }
        this.showTag = !this.showTag
        this.showType = false
        this.showState = false
        this.showDate = false
      }
      if (type === 'date') {
        if (this.showDate) {
          this.show = false
        } else {
          this.show = true
        }
        this.showDate = !this.showDate
        this.showType = false
        this.showState = false
        this.showTag = false
      }
    },
    onSearch() {
      this.getList(1)
    },
    onClear() {
      this.query.name = ''
      this.getList(1)
    },
    changeFn(data) {
      this.query.dataScope = !data
      this.getList(1)
    },
    onSelectType(data) {
      this.queryTemp.customerType = data.type
    },
    submitType() {
      this.query.customerType = JSON.parse(JSON.stringify(this.queryTemp.customerType))
      this.show = false
      this.showType = false
      this.setName()
      this.getList(1)
    },
    onSelectState(data) {
      this.queryTemp.trackState = data.stageVal
    },
    submitState() {
      this.query.trackState = JSON.parse(JSON.stringify(this.queryTemp.trackState))
      this.showState = false
      this.show = false
      this.setStateName()
      this.getList(1)
    },
    getList(page) {
      page && (this.query.pageNum = page)
      this.loading = true
      this.finished = false
      // this.dataList = [{customerName: '张三测试', userName:"跟进员工"}]
      getDataList(this.query).then((res) => {
        if (res.code === 200) {
          if (this.query.pageNum > 1) {
            this.dataList = [...this.dataList, ...res.rows]
          } else {
            this.dataList = res.rows
          }
          this.total = Number(res.total)
          if (this.total === this.dataList.length) {
            this.finished = true
          }
          if (this.query.name) {
            let replaceReg = new RegExp(this.query.name, 'ig')
            let replaceString = `<span style="color: #0079DE;">${this.query.name}</span>`
            this.dataList.forEach((dd) => {
              dd.customerName = dd.customerName.replace(replaceReg, replaceString)
              dd.userName = dd.userName.replace(replaceReg, replaceString)
            })
          }
        }
        this.loading = false
      })
    },
  },
}
</script>

<style lang="less" scoped>
.bg {
  background: linear-gradient(180deg, #eaf5ff 0%, rgba(253, 253, 253, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  // overflow: auto;
}
.menu {
  padding: 11px 16px 14px 16px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #666;
}
.sub-search {
  font-size: 13px;
  color: #666;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.type_list {
  display: flex;
  padding: 25px 15px;
  background: #fff;
  flex-wrap: wrap;
  .item {
    margin-left: 13px;
    margin-bottom: 11px;
    background: #fafafa;
    border-radius: 8px;
    font-size: 13px;
    color: #222222;
    width: 72px;
    height: 34px;
    line-height: 34px;
    text-align: center;
  }
}
.submit {
  padding: 10px 20px;
  background: #fff;
  .submit_button {
    padding: 10px 20px;
    width: 100%;
    background: #0079de;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 0;
    text-align: center;
  }
}
.list {
  padding: 0 12px;
  .unit {
    margin-bottom: 8px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0);
    border-radius: 8px;
    display: flex;
    &.active {
      background: @colorSub;
    }
    .unit_img {
      height: 46px;
      width: 46px;
      border-radius: 2px;
    }
    .unit_content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding-left: 10px;
      .name {
        margin-right: 4px;
        font-size: 14px;
        color: #222222;
        font-weight: 600;
      }
      .user {
        font-size: 13px;
        color: #9f9f9f;
        font-weight: 500;
      }
    }
    .unit_state {
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .date {
        font-size: 13px;
        color: #9f9f9f;
      }
      .state {
        padding: 3px 11px;
        border-radius: 3px 3px 3px 3px;
        font-size: 10px;
      }
      .state1 {
        color: #0079de;
        background: #ecf5ff;
      }
      .state2 {
        background: #effffa;
        color: #00d695;
      }
      .state3 {
        background: #fff5f6;
        color: #e34d59;
      }
    }
  }
}
.select {
  margin-left: 2px;
  height: 12px;
  width: 12px;
}
</style>
<style lang="less">
.bg .van-field__control {
  font-size: 12px;
}
.bg .van-search {
  padding: 11px 16px 0 16px;
}
.bg .van-search__content {
  border-radius: 8px 8px 8px 8px;
}
.bg input::-webkit-input-placeholder {
  font-size: 12px;
}
.bg input::-moz-input-placeholder {
  font-size: 12px;
}
.bg input::-ms-input-placeholder {
  font-size: 12px;
}
.sub-search {
  .van-switch {
    width: 3em;
    color: #fff;
  }
  .van-switch--on .van-switch__node {
    -webkit-transform: translateX(2em);
    transform: translateX(2em);
  }
  .van-switch--on .van-switch::before {
  }
  // .van-switch--on::after {
  //   content: '企业';
  //   font-size: 12px;
  //   position: absolute;
  //   top: 50%;
  //   transform: translateY(-50%);
  //   left: 25px;
  //   color: '#333';
  // }
}
</style>
